<template>
  <div class="wrapper__left__menu">
    <el-menu
      active-text-color="#3772FF"
      background-color="#1C1C24"
      default-active="2"
      text-color="#fff"
      @select="handleSelectBtn"
    >
      <el-menu-item index="1">
        <el-icon><user /></el-icon>
        <span class="menu-title">Member management</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><wallet /></el-icon>
        <span class="menu-title">Project management</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><star /></el-icon>
        <span class="menu-title">My collection</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><lock /></el-icon>
        <span class="menu-title">Change Password</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
      <el-menu-item index="5">
        <el-icon><clock /></el-icon>
        <span class="menu-title">Log out</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits<(e: 'menuSelect') => void>()
const handleSelectBtn = () => {
  emits('menuSelect')
}
</script>

<style scoped lang="less">
.wrapper__left__menu {
  margin-top: 20px;

  .menu-title {
    flex: 1;
  }
}
:deep(.el-menu) {
  border: none;
  padding: 20px;
  border-radius: 20px;
}
:deep(.el-menu-item) {
  padding: 0;
  font-size: 18px;
  height: 60px;
  line-height: 60px;
}
:deep(.el-menu-item.is-active) {
  padding: 0;
  background-color: #3772ff;
  color: #fff;
  width: 100%;
}

@media screen and (max-width: 768px) {
  :deep(.el-menu) {
    padding: 0;
  }
  :deep(.el-menu-item) {
    padding-left: 0 !important;
  }
  :deep(.el-icon) {
    width: 36px;
    height: 36px;
    margin: 0;
  }
  :deep(.el-menu-item.is-active) {
    width: auto;
    color: var(--el-menu-active-color);
    background-color: transparent;
  }
}
</style>
